<template>
	<om-page :title="pageTitle">
		<ot-sl-filter :ref="'slFilter'" :topFixed="true" :menuList="filterList" @result="onChangeFilter" />
		<view class="descFilter">{{ descFilter }}</view>
		<view class="nodata" v-show="dataList.length == 0 && dataStatus">{{ descFilter+'暂无数据！' }}</view>
		<view class="page__bd" style="margin-top: 31px;">
			<uni-list>
				<view v-for="(item, index) in dataList" :key="index" class="item">
					<uni-list-item 
						:title="'目标代码：'+item.orderNum"
						:avatar="index + 1"
						:avatarBgColor="calcBgColor(item)"
						:showArrow="false"
					>
					<view slot="note">
						<view>目标描述：{{item.targetRemark}}</view>
					</view>
					</uni-list-item>
				</view>
			</uni-list>
		</view>
	</om-page>
</template>

<script>
	export default {
		data() {
			return {
				dataStatus: false,
				isFlagNum: 0,
				selectYear: '',
				descFilter: '',
				pageTitle:"中期目标查询",
				dataList: [],
				filterList: [{
					title: '单位',
					defaultTitle: '单位',
					detailTitle: '请选择单位',
					key: 'orgin',
					isSort: true,
					reflexTitle: true,
					defaultSelectedIndex: 0,
					detailList: [{
						'title': '不限',
						'value': ''
					}]
				},{
					title: '年度',
					defaultTitle: '年度',
					detailTitle: '请选择年度',
					key: 'year',
					isSort: true,
					reflexTitle: true,
					defaultSelectedIndex: 0,
					detailList: [{
						'title': '不限',
						'value': ''
					}]
				}],
			};
		},
		provide() {
			return {
				searchKey: this
			}
		},
		methods: {
			calcBgColor(item) {
				return this.ColorList[3].name
			},
			getDataList(data,isinit){
				let _that = this;
				let obj = data || {};
				
				if(isinit){
					obj.initFlag = true
					_that.isFlagNum = 1
				}
				
				_that.om.request("torgMediumTermPlan/getMobileData",obj).then(res=>{
					if(res.succeed){
						_that.descFilter = _that.filterList[0].detailList[_that.filterList[0].defaultSelectedIndex].title + '包含'+res.value.request.year+'年的中期目标'
						_that.dataStatus = true
						_that.dataList = res.value.targets
					}
				})
			},
			onChangeFilter(data){
				let _that = this
				_that.dataList = []
				_that.dataStatus = false
				data.year = parseInt(data.year) || ''
				_that.selectYear = data.year
				if(_that.isFlagNum == 1){
					_that.getDataList(data)
				}else{
					_that.isFlagNum = _that.isFlagNum + 1
				}
			},
			changeArr(otit, ntit, oval, nval, data){
				for(let i=0; i<data.length; i++){
					if(otit){
						data[i][ntit] = data[i][otit]
					}
					if(oval){
						data[i][nval] = data[i][oval]
					}
				}
				return data;
			}
		},
		onLoad() {
			let _that = this;
			
			uni.setNavigationBarTitle({
				title: '中期目标查询'
			});
			
			let arr = [_that.om.request("common/findYearList",{
				berfore: 2,
				after: 2,
			}), _that.om.request("torganization/getOrgList")]
			//多个AJAX全部完成时开始执行
			Promise.all(arr).then(res => {
				_that.filterList[1].detailList = _that._.cloneDeep(_that.changeArr('text', 'title', null, null, res[0]))
				let myDate = new Date()
				let nowyear = myDate.getFullYear()
				let num = 0
				for(let i=0; i<res[0].length; i++){
					if(res[0][i].value == nowyear){
						num = i
					}
				}
				_that.filterList[1].defaultSelectedIndex = num
				_that.selectYear = _that.filterList[1].detailList[_that.filterList[1].defaultSelectedIndex].value
				_that.filterList[0].detailList = _that._.cloneDeep(_that.changeArr('shortName', 'title', 'id', 'value', res[1]))
				_that.$refs.slFilter.resetMenuList(_that.filterList)
				
				let obj={
					year: _that.selectYear,
					orgin: _that.filterList[0].detailList[_that.filterList[0].defaultSelectedIndex].value,
				}
				_that.getDataList(obj,true)
			})
		},
	};
</script>

<style>
	.descFilter{
		position: fixed;
		top: 30px;
		line-height: 30px;
		padding: 0 15px;
		font-size: 14px;
		border-bottom: #EEEEEE 1px solid;
		z-index: 99;
		width: 100%;
		background: #FFF;
	}
	.nodata{
		width: calc(100% - 30px);
		margin: 30px 15px 0;
		height: 26px;
		line-height: 26px;
		background: none;
	}
</style>                                                  
